<div v-cloak id="app" class="main-content">
    <div class="form-body">
        <el-row :gutter="10">
            <el-col :span="12">
        <div style="background: #f1f3f5;padding:5px" flex="main:left cross:center">
            <span style="font-size:30px;padding: 10px;">
                <i v-if="data.access_token" ref="tokenIco" style="color:#1aad19;" class="el-icon-success"></i>
                <i v-else style="color:#F56C6C;" class="el-icon-error"></i>
            </span>
            <div >
                <h4 style="margin:5px 0">{{accessTokenTipTitle}}</h4>
                <div>
                    <div style="color:#9A9A9A">{{accessTokenTtipHelp}}</div>
                </div>
            </div>
        </div></el-col>
        <el-col :span="12">
        <div style="background: #f1f3f5;padding:5px" flex="main:left cross:center">
            <span style="font-size:30px;padding: 10px;">
                <i v-if="data.ticket" ref="ticketIco" style="color:#1aad19;" class="el-icon-success"></i>
                <i v-else style="color:#F56C6C;" class="el-icon-error"></i>
            </span>
            <div >
                <h4 style="margin:5px 0">{{ticketTipTitle}}</h4>
                <div>
                    <div style="color:#9A9A9A">{{titketTtipHelp}}</div>
                </div>
            </div>
        </div></el-col>
        </el-row>
    </div>
</div>

<script>
    const _data = {:json_encode($data)};
    const app = new Vue({
        el: '#app',
        data() {
            return{
                data:_data,
                ticketTipTitle:'',
                titketTtipHelp:'验证票据，在第三方平台创建审核通过后,每隔 10 分钟推送,有效时间为 12 小时.',
                accessTokenTipTitle:'',
                accessTokenTtipHelp:'第三方平台接口的调用凭据。令牌的获取是有限制的，每个令牌的有效期为 2 小时.'
            }
        },
        created() {
            this.accessTokenTipTitle= (false == this.data.access_token) ? '令牌通讯错误' : '上次获取:' + this.data.access_token.expired_format
            this.ticketTipTitle= (false == this.data.ticket) ? '验证票据通讯错误' : '上次获取:' + this.data.ticket.expired_format
        },
        mounted(){
            if(this.data.access_token && Math.abs(Date.now()/1000-this.data.access_token.expired) > 7000){
                this.$refs['tokenIco'].style.color=`#E6A23C`,this.$refs['tokenIco'].className ='el-icon-warning'
            }
            if(this.data.ticket && (Math.abs(Date.now()/1000-this.data.ticket.expired)) >43200){
                this.$refs['ticketIco'].style.color=`#E6A23C`,this.$refs['ticketIco'].className ='el-icon-warning'
            }
           
        },
        methods: {
        },
    })
</script>